<template>
  <section id="cm-detail">
    <header class="cm-d-header">
      <div>
        <p class="tddd fb f16">北京昌平保利影剧院</p>
        <p class="tddd f13 c6">昌平区鼓楼南街佳莲时代广场四层</p>
      </div>
    </header>
    <section class="cm-welfare cm-d-welfare">
      <span class="label-mod label-orange">新人专享</span>
      <span class="label-mod">新人特惠，名额有限抢完即止</span>
    </section>
    <section class="film-info">
      <!-- <film ></film> -->
      <section class="pr v-slide-content">
        <ul class="v-slide-box pa slide-action" style="width: 766px;">
          <li>
            <img
              src="https://gw.alicdn.com/i4/TB1onyyOXXXXXcrapXXXXXXXXXX_.jpg"
              data-id="205358"
              class="click-select"
              data-width="72"
              style="height: 90px;"
            />
          </li>
          <li>
            <img
              src="https://gw.alicdn.com/i4/TB18r0eOpXXXXa9apXXXXXXXXXX_.jpg"
              data-id="158865"
              class
              data-width="54"
              style="height: 90px;"
            />
          </li>
          <li>
            <img
              src="https://gw.alicdn.com/i4/TB1lHp_OXXXXXcCXFXXXXXXXXXX_.jpg"
              data-id="178125"
              class
              data-width="63"
              style="height: 90px;"
            />
          </li>
          <li>
            <img
              src="https://gw.alicdn.com/i3/TB1wwcCOpXXXXaCXXXXXXXXXXXX_.jpg"
              data-id="189011"
              class
              data-width="64"
              style="height: 90px;"
            />
          </li>
          <li>
            <img
              src="https://gw.alicdn.com/i4/TB1oCtGOXXXXXaZXVXXXXXXXXXX_.jpg"
              data-id="157202"
              class
              data-width="64"
              style="height: 90px;"
            />
          </li>
          <li>
            <img
              src="https://gw.alicdn.com/i4/TB1aGssOpXXXXX9XpXXXXXXXXXX_.jpg"
              data-id="205256"
              class
              data-width="63"
              style="height: 90px;"
            />
          </li>
          <li>
            <img
              src="https://gw.alicdn.com/i4/TB1w1K3OpXXXXatapXXXXXXXXXX_.jpg"
              data-id="190180"
              class
              data-width="63"
              style="height: 90px;"
            />
          </li>
          <li>
            <img
              src="https://gw.alicdn.com/i4/TB1lTZdNVXXXXXSXXXXXXXXXXXX_.jpg"
              data-id="168138"
              class
              data-width="61"
              style="height: 90px;"
            />
          </li>
          <li>
            <img
              src="https://gw.alicdn.com/i3/TB1v0TYNVXXXXcrapXXXXXXXXXX_.jpg"
              data-id="190456"
              class
              data-width="63"
              style="height: 90px;"
            />
          </li>
          <li>
            <img
              src="https://gw.alicdn.com/i4/TB1LapbOpXXXXX3aFXXXXXXXXXX_.jpg"
              data-id="138217"
              class
              data-width="64"
              style="height: 90px;"
            />
          </li>
        </ul>
      </section>
      <div class="sel-film">
        <p class="fb">你的名字</p>
        <div class="full-star pr cm-star">
          <div class="score-start"></div>
          <span class="score pa">9.4</span>
        </div>
      </div>
      <div class="sel-date pr" style="background: #ffff">
        <ul @click="selectDateTab">
          <li>
            <span>今天 12-15</span>
            <span class="font-icon">惠</span>
          </li>
          <li>
            <span>明天 12-16</span>
            <span class="font-icon">惠</span>
          </li>
          <li>
            <span>后天 12-17</span>
            <span class="font-icon">惠</span>
          </li>
          <li>
            <span>周五 12-18</span>
            <span class="font-icon">惠</span>
          </li>
        </ul>
        <span class="move pa" :style="{left: `${105*selDateNum}px`}"></span>
      </div>
      <div class="tips">温馨提示:开场前15分钟关闭在线售票</div>
    </section>
    <section class="play-date" style=".play-date {ground-color: #fff;padding-bottom: 10px;}">
      <section>
        <div class="line">
          <span class="ll le vm"></span>
          <i class="ic md vm"></i>
          <em class="lef">上午场</em>
          <span class="lr le vm"></span>
        </div>

        <ul class="pdate">
          <li>
            <div class="pd pd-l fl">
              <div>
                <em class="fb">10:30</em>
                <span class="fo f1">国语 3D</span>
              </div>
              <div>
                <span class="fo f2">12:14散场</span>
                <span class="fo f3">三号厅</span>
              </div>
            </div>

            <div class="pd pd-r fr pr">
              <div class="pr-l">
                <em class="fb prf">¥18.8</em>
                <span class="fo f4">¥50</span>
                <span class="label-mod label-orange">新人专享</span>
              </div>
              <button class="buy-btn f12 pa">购买</button>
            </div>

          </li>
        </ul>

            <div class="line" style="text-align: center;
    margin-top: 10px;">
              <span class="ll le vm"></span>
              <i class="ic nd vm"></i>
              <em class="lef">下午场</em>
              <span class="lr le vm"></span>
            </div>

   <ul class="pdate">
          <li>
            <div class="pd pd-l fl">
              <div>
                <em class="fb">13:30</em>
                <span class="fo f1">国语 3D</span>
              </div>
              <div>
                <span class="fo f2">15:33散场</span>
                <span class="fo f3">三号厅</span>
              </div>
            </div>

            <div class="pd pd-r fr pr">
              <div class="pr-l">
                <em class="fb prf">¥28.8</em>
                <span class="fo f4">¥50</span>
                <span class="label-mod label-orange">新人专享</span>
              </div>
              <button class="buy-btn f12 pa">购买</button>
            </div>

          </li>
        </ul>

   <ul class="pdate">
          <li>
            <div class="pd pd-l fl">
              <div>
                <em class="fb">17:30</em>
                <span class="fo f1">国语 3D</span>
              </div>
              <div>
                <span class="fo f2">19:33散场</span>
                <span class="fo f3">三号厅</span>
              </div>
            </div>

            <div class="pd pd-r fr pr">
              <div class="pr-l">
                <em class="fb prf">¥38.8</em>
                <span class="fo f4">¥50</span>
                <span class="label-mod label-orange">新人专享</span>
              </div>
              <button class="buy-btn f12 pa">购买</button>
            </div>

          </li>
        </ul>




      </section>
    </section>
  </section>
</template>

<script>
import { mapMutations } from "vuex";
// import { film, playDate} from '../components/'
export default {
  data() {
    return {
      filmLists: [],
      itemId: 0,
      selDateNum: 0,
      cinemaData: {},
      selFilm: {}
      // palyDate: [
      // 	{date: '今天 12-15', num: 0},
      // 	{date: '明天 12-16', num: 1},
      // 	{date: '后天 12-17', num: 2},
      // 	{date: '周五 12-18', num: 3}
      // ]
    };
  },
  components: {
    // film,
    // playDate
  },
  watch: {
    // itemId () {
    // 	this.selFilm = this.getDataById(this.filmLists, this.itemId)
    // }
  },
  methods: {
    ...mapMutations([
      "pushLoadStack",
      "completeLoad",
      "showCityList",
      "updateAreaData"
    ]),
    requestData(url, fn) {
      this.pushLoadStack();
      this.$http
        .get(url)
        .then(fn)
        .then(this.completeLoad);
    },
    getDataById(array, id) {
      for (let i = 0; i < array.length; i++) {
        if (array[i].id == id) {
          return array[i];
        }
      }
      return false;
    },
    selectDateTab(event) {
      let num = +event.target.getAttribute("data-num");
      this.selDateNum = num;
    }
  },
  created() {
    // this.requestData('/movie/cinema_detail', (response) => {
    // 	let data = response.data
    // 	this.filmLists = data.data.data.returnValue.shows
    // 	this.selFilm = this.filmLists[0]
    // })
    // this.cinemaData = this.getDataById(this.$store.state.cinema.area, this.$route.params.id)
    // if (!this.cinemaData) {
    // 	this.$router.push('/')
    // }
  }
};
</script>

<style>
#cm-detail {
  background: #fff;
  height: 100%;
}
.cm-d-header {
  padding: 13px 0 0 15px;
  box-sizing: border-box;
}
.cm-d-header > div {
  padding: 0 15px 13px 0;
  border-bottom: 1px solid #ebebeb;
}
.cm-d-header p:last-child {
  margin-top: 6px;
  color: #666;
}
.cm-d-welfare {
  padding: 0 15px 15px;
  margin-top: 15px;
}
.cm-d-welfare::after {
  content: ">";
  float: right;
  font-size: 16px;
  color: #999;
  font-weight: 100;
  transform: scaleY(1.3);
  line-height: 15px;
}
.film-info {
  background-color: #4685a4;
}
.sel-film {
  text-align: center;
  background-color: #fff;
  padding: 5px 0;
  border-bottom: 1px solid #ebebeb;
}
.sel-film p {
  font-size: 16px;
}
.cm-star {
  display: inline-block;
  margin: 3px 0 0 -29px;
  height: 15px;
  width: 73px;
}
.cm-star .score {
  right: -24px;
  font-size: 13px;
  top: 1px;
}
.sel-date {
  width: 100%;
  overflow: hidden;
  overflow-x: scroll;
}
.sel-date ul {
  width: 480px;
}
.sel-date li {
  float: left;
  width: 100px;
  height: 40px;
  line-height: 40px;
  background-color: #fff;
  font-size: 13px;
  color: #555;
  padding-left: 5px;
}
.font-icon {
  color: #fff;
  height: 20px;
  border-radius: 3px;
  background-color: #ff9201;
  margin-left: 5px;
}
.sel-date .move {
  width: 105px;
  transition: left 0.3s ease-in-out;
}
.tips {
  padding: 5px 15px;
  font-size: 12px;
  color: #ffa101;
  text-align: left;
  background-color: #fbf9e4;
  border-top: 1px solid #fbeccd;
  border-bottom: 1px solid #fbeccd;
}
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
  height: 0;
  background-color: transparent;
}

.line {
  text-align: center;
  margin-top: 10px;
}
.le {
  display: inline-block;
  width: 35%;
  border-bottom: 1px dashed #d7d7d7;
}

.vm {
  vertical-align: middle;
  display: inline-block;
}

.md {
  background-image: url();
  background-color: #b8dcf6;
}
.ic {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 100%;
  background-size: 90%;
  background-position: center center;
  background-repeat: no-repeat;
  margin-left: 1.5%;
}

.lef {
  color: #999;
  font-weight: 400;
  font-size: 10px;
  margin-right: 1.5%;
}

.pdate li:last-child {
  border-bottom: 0px;
}

.pdate li {
  height: 65px;
  padding: 15px 10px 10px 15px;
  /* border-bottom: 1px solid #ebebeb; */
}

.pd {
  display: inline-block;
  width: 45%;
}
.fl {
  float: left;
}

.pdate em {
  font-size: 18px;
}
.fb {
  font-size: bold;
}

.f1 {
  margin-left: 22px;
}
.fo {
  font-size: 12px;
  color: #999;
}

.pr {
  position: relative;
}
.fr {
  float: right;
}
.pr-l {
  text-align: right;
}

.pd,
.pr-l {
  display: inline-block;
  width: 45%;
  margin-right: 20px;
}

.prf {
  color: #fd2c32;
}

.fb {
  font-weight: bold;
}
.f4 {
  display: block;
  text-decoration: line-through;
  margin: 2px 0;
}

.fo {
  font-size: 12px;
  color: #999;
}

.label-mod.label-orange {
  background: #ff8625;
  border-color: #ff8625;
  color: #fff;
}

.label-mod {
  display: inline-block;
  margin: 0 1px;
  padding: 0 1px;
  line-height: 14px;
  min-width: 12px;
  font-size: 12px;
  text-align: center;
  border-radius: 2px;
  font-weight: 400;
  border: 1px solid transparent;
}

.pdate .buy-btn {
  left: 78%;
  bottom: 24px;
  text-align: center;
}

.buy-btn {
  border: 1px solid #ff4d64;
  color: #ff4d64;
}

.buy-btn,
.forward-buy-btn {
  height: 24px;
  width: 45px;
  line-height: 20px;
  text-align: center;
  background-color: #fff;
  outline: none;
  border-radius: 3px;
  font-weight: bold;
}

.pa {
  position: absolute;
}

.f12 {
  font-size: 12px;
}

.film-info {
  background-color: #4685a4;
}
.v-slide-content {
  width: 100%;
  height: 120px;
  overflow: hidden;
}

/* .pr {
    position: relative;
} */

.slide-action {
  transition: transform 0.7s ease-out;
  -webkit-transition: transform 0.7s ease-out;
}

.v-slide-box {
  height: 90px;
  bottom: 0px;
  box-sizing: border-box;
}

.pa {
  position: absolute;
}

.v-slide-box li:first-child {
  margin-left: 15px;
}

.v-slide-box li {
  float: left;
  margin-right: 10px;
  height: 100%;
}

.v-slide-box img {
  width: auto;
  height: 100%;
  transition: all 0.2s ease-out;
  -webkit-transition: all 0.2s ease-out;
}

.click-select {
  height: 100px !important;
  margin-top: -10px;
  border: 2px solid #fff;
}

.nd {
    background-image: url(…UzMjggMjUxLjkwNCA1MDYuNjExMiAyNTEuOTA0TDUwNi42MTEyIDI1MS45MDR6Jy8+PC9zdmc+);
    background-color: #faccaa;
}

.ic {
    width: 16px;
    height: 16px;
    border-radius: 100%;
    background-size: 90%;
    background-position: 50%;
    background-repeat: no-repeat;
    margin-left: 1.5%;
}
.ic, .le {
    display: inline-block;
}
.vm {
    vertical-align: middle;
    display: inline-block;
}

</style>

